const { useState, useEffect } = React;
const { Modal, Button, Form, Input, Radio, Switch, Checkbox, message, Select } = antd;

const { Option } = Select;





const OptForm = ({ vars, opts, visible, onCancel, onSubmit }) => {
  const [form] = Form.useForm();
  const [options, setOptions] = useState({});
  const [newOptions, setNewOptions] = useState({});

  useEffect(() => {
    setOptions(opts || {});
  }, [opts]);

  const handleSubmit = (values) => {
    onSubmit({ formValues: values, options });
    form.resetFields();
  };

  const handleAddOption = (fieldName) => {
    const value = newOptions[fieldName]?.trim();
    if (value) {
      setOptions(prev => ({
        ...prev,
        [fieldName]: [...(prev[fieldName] || []), value]
      }));
      setNewOptions(prev => ({ ...prev, [fieldName]: '' }));
    }
  };

  const updateOption = (fieldName, index, value) => {
    setOptions(prev => {
      const newOpts = [...prev[fieldName]];
      newOpts[index] = value;
      return { ...prev, [fieldName]: newOpts };
    });
  };

  const removeOption = (fieldName, index) => {
    setOptions(prev => ({
      ...prev,
      [fieldName]: prev[fieldName].filter((_, i) => i !== index)
    }));
  };

  return (
    <Modal
      title="表单编辑"
      visible={visible}
      onCancel={onCancel}
      onOk={() => form.submit()}
      destroyOnClose
      width={600}
    >
      <Form form={form} onFinish={handleSubmit} layout="vertical">
        {vars.map(({ name, type }) => (
          <div key={name}>
            <Form.Item
              label={name}
              name={name}
              valuePropName={type === 'switch' ? 'checked' : 'value'}
            >
              {type === 'input' && <Input />}
              {type === 'radio' && (
                <Radio.Group>
                  {options[name]?.map(opt => (
                    <Radio key={opt} value={opt}>{opt}</Radio>
                  ))}
                </Radio.Group>
              )}
              {type === 'checkbox' && (
                <Checkbox.Group>
                  {options[name]?.map(opt => (
                    <Checkbox key={opt} value={opt}>{opt}</Checkbox>
                  ))}
                </Checkbox.Group>
              )}
              {type === 'switch' && <Switch />}
            </Form.Item>

            {(type === 'radio' || type === 'checkbox') && (
              <div style={{ marginBottom: 24 }}>
                <div style={{ marginBottom: 8 }}>选项配置：</div>
                {options[name]?.map((opt, index) => (
                  <div key={index} style={{ display: 'flex', marginBottom: 8 }}>
                    <Input
                      value={opt}
                      onChange={(e) => updateOption(name, index, e.target.value)}
                      style={{ flex: 1, marginRight: 8 }}
                    />
                    <Button danger onClick={() => removeOption(name, index)}>
                      删除
                    </Button>
                  </div>
                ))}
                <div style={{ display: 'flex' }}>
                  <Input
                    value={newOptions[name] || ''}
                    onChange={(e) => setNewOptions(prev => ({
                      ...prev,
                      [name]: e.target.value
                    }))}
                    style={{ flex: 1, marginRight: 8 }}
                    placeholder="输入新选项"
                  />
                  <Button onClick={() => handleAddOption(name)}>
                    添加选项
                  </Button>
                </div>
              </div>
            )}
          </div>
        ))}
      </Form>
    </Modal>
  );
};

